import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { List, Icon, TextareaItem, ActivityIndicator } from 'antd-mobile';
import { ToastTips } from '../../../../../common/toastTips/tosat';
import content from '../../../common/contentCss/content.css';
import styles from './common.css';
import CustTitle from '../../../common/title/title';
import PopupsRow from '../../../../../common/popupsRow/PopupsRow';
import PopupsOperationRow from '../../../../../common/popupsOperationRow/popupsOperationRow';

import CustomsItem from '../../../../../common/items/CustomsItem';

import Line from '../../../../../common/borderLine/Line';

import CustomsItemNoArrow from '../../../../../common/items/CustomsItemNoArrow';
import CustomsItemIcon from './pages/simpleInfo/customsItemIcon/customsItemIcon';
import CustomsItemPro from './pages/simpleInfo/customsItemPro/customsItemPro';
import CustomsSignature from './pages/simpleInfo/customsSignature/customsSignature';
import imageCompress from '../../../../../framework/utils/imageCompress';
import CustomsSkill from './pages/simpleInfo/customsSkill/customsSkill';
import PcdItem from './pages/simpleInfo/pcd/pcdSelect';

const noAvatar = require('../../../../../assets/avatar.jpg')

const Item = List.Item

function SimpleInfo({loading,proIcon,dispatch,simpleInfo,personal}) {

  // const {skillArr, imgURL,data,memberList,name } = simpleInfo
  const { skillArr, imgURL } = simpleInfo;
  const { profile,province, city, district,registeredUserLoginName } = personal;

  // console.log("profile", JSON.stringify(profile));

  const titleProps = {
    titleName:'基本信息',
    showSaveBtnStatus:true,
    saveBtnName:'保存',
    goBack(){
      dispatch(routerRedux.goBack());
    },
    onSave(id){
      if(!checkedBasicInfo(profile,province, city, district)){
        return;
      }
      dispatch({
        type:'personal/onSubmit',
      })
    }
  }

  //验证基本信息
  const checkedBasicInfo = (profile,province, city, district) => {
    if(!profile.avatar){
      ToastTips('请选择上传的图片', 2000, null);
      return false;
    }

    if(!profile.name){
      ToastTips('请填写名字', 2000, null);
      return false;
    }

    if(!province || !city ||!district){
      ToastTips('请选着省市区', 2000, null);
      return false;
    }

    if(!profile.age){
      ToastTips('请填写年龄', 2000, null);
      return false;
    }

    if(!profile.sex){
      ToastTips('请选择性别', 2000, null);
      return false;
    }

    if(!profile.height){
      ToastTips('请填写身高', 2000, null);
      return false;
    }

    if(!profile.phone){
      ToastTips('请填写联系电话', 2000, null);
      return false;
    }

    // if(!profile.email){
    //   ToastTips('请填写邮箱', 2000, null);
    //   return false;
    // }

    return true;
  }

  const customsItemProProps = {
    imgURL: profile.avatar,
    icon: proIcon,
    textName:'我的头像',
    saveImgUrlInfo(base64Url,imgURL){
      profile.avatar = imgURL;
      dispatch({
        type:'personal/querySuccess',
        payload:{
          base64Url,
          profile
        }
      })
    }
  }

  const nameProps = {
    popupsHead:'请输入名字',
    labelName:'名字',
    PopupsDefaults: profile.name,
    displayDefaults:profile.name == "" ? "名字" : profile.name ,
    onSave(value){
      if (value) {
        profile.name = value;
        dispatch({
          type:'personal/querySuccess',
          payload:{
            profile
          }
        })
      }
    }
  }

  const pcdProps = {
    province,
    city,
    district,
    savePCD(province, city, district){
      dispatch({
        type:'personal/querySuccess',
        payload:{
          province,
          city,
          district
        }
      })
    }
  }

  const ageProps = {
    popupsHead:'请填写年龄',
    labelName:'年龄',
    PopupsDefaults: profile.age,
    displayDefaults:  profile.age == "" ? "年龄" :  profile.age ,
    onSave(value){
      if (value) {
        profile.age = value;
        dispatch({
          type:'personal/querySuccess',
          payload:{
            profile
          }
        })
      }
    }
  }

  const sexProps = {
    popupsHead:'请填写性别',
    labelName:'性别',
    PopupsDefaults: profile.sex,
    displayDefaults:  profile.sex == "" ? "性别" :  profile.sex ,
    onSave(value){
      if (value) {
        profile.sex = value;
        dispatch({
          type:'personal/querySuccess',
          payload:{
            profile
          }
        })
      }
    },
    sublime(value){
      console.log('value',value)
      // this.setState({ v: value })
      // this.props.onSave(value)
        profile.sex = value;
      dispatch({
        type:'personal/querySuccess',
        payload:{
          profile
        }
      })

    }
  }

  const hieghtProps = {
    popupsHead:'请填写身高',
    labelName:'身高',
    PopupsDefaults: profile.height,
    displayDefaults:  profile.height == "" ? "未设置" :  profile.height ,
    onSave(value){
      if (value) {
        profile.height = value;
        dispatch({
          type:'personal/querySuccess',
          payload:{
            profile
          }
        })
      }
    }
  }

  const phoneProps = {
    popupsHead:'请填写联系电话',
    labelName:'联系电话',
    PopupsDefaults: profile.phone ? profile.phone : registeredUserLoginName,
    displayDefaults:  profile.phone ? profile.phone : registeredUserLoginName ,
    onSave(value){
      if (value) {
        profile.phone = value;
        dispatch({
          type:'personal/querySuccess',
          payload:{
            profile
          }
        })
      }
    }
  }

  const emailProps = {
    popupsHead:'请填写邮箱',
    labelName:'邮箱',
    PopupsDefaults: profile.email,
    displayDefaults:  profile.email == "" ? "未绑定" :  profile.email ,
    onSave(value){
      if (value) {
        profile.email = value;
        dispatch({
          type:'personal/querySuccess',
          payload:{
            profile
          }
        })
      }
    }
  }

  const saveSignature = (e) => {
    const value = e.target.value;
    if(value){
      profile.signature = value;
      dispatch({
        type:'personal/querySuccess',
        payload:{
          profile
        }
      })
    }
  }

  const CustomsSkillProps = {
    onSvae(){
      dispatch({
        type:'simpleInfo/query',
        payload:{
          skillArr: skillArr
        }
      })
    },
    skillArr:skillArr,
    addSkillItem() {
      console.log('159');
    }
  }


  const MarginHeight = () => <div style={{height: '0.6em', backgroundColor:'#F5F5F9'}}></div>;

  return(
    <div className={content.content}>
      <CustTitle {...titleProps}/>
      <div style={{
        marginTop: '2.8125em',
      }}>
      <CustomsItemPro {...customsItemProProps} />
      <Line />
      <PopupsRow {...nameProps} />
      <Line />
      <PcdItem {...pcdProps}/>
      <Line />
      <PopupsRow {...ageProps} />
      <Line />
      <PopupsOperationRow {...sexProps} />
      <Line />
      <PopupsRow {...hieghtProps} />
      <Line />
      <PopupsRow {...phoneProps} />
      <Line />
      <PopupsRow {...emailProps} />
      <Line />

      <div className={styles.signature} >
        <div className={styles.signatureLink}>
          个性签名
        </div>
        <textarea
          className={styles.TextareaItem}
          cols={25}
          rows={5}
          placeholder="个性签名"
          defaultValue={profile.signature}
          onBlur={(e) => saveSignature(e)}
        />
      </div>
      <Line />

      {/* <CustomsSkill {...CustomsSkillProps} /> */}

      </div>
      <ActivityIndicator
        toast
        text=""
        animating={loading}
      />
    </div>
  )
}

function mapStateToProps(state, ownProps) {
  return {
    loading: state.loading.global,
    simpleInfo:state.simpleInfo,
    proIcon: state.proIcon,
    memberList: state.memberList,
    personal: state.personal

  }
}

export default connect(mapStateToProps)(SimpleInfo);
